<script setup>
import {yjpStore} from '../stores/yjp';
const yjp = yjpStore();


</script>

<template>
    <div class="content">
        <el-descriptions title="这是我的子组件哦" :column="3" >
          <el-descriptions-item label="姓名" label-class-name="my-label" content-class-name="my-content">{{ yjp.username }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ yjp.phone }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ yjp.age }}</el-descriptions-item>
          <el-descriptions-item label="居住地">{{ yjp.position }}</el-descriptions-item>
          <el-descriptions-item label="备注">
            <el-tag size="small">{{ yjp.school }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系地址" :contentStyle="{ 'text-align': 'right' }">{{yjp.contentPosition}}</el-descriptions-item>
        </el-descriptions>
        <div class="amazingButton">
            <text>点它恢复年龄试试！</text>
         <el-button type="primary" round="true" @click="yjp.restore">恢复！</el-button>
        </div>
    </div>
</template>


<style scoped>
 .my-label {
    background: #E1F3D8;
  }

  .my-content {
    background: #FDE2E2;
  }
  .content{
    width: 50%;
    height: 200px;
    margin: auto;
  }
  .amazingButton{
    width: 40%;
    margin:auto;
    margin-top: 20px;
  }
</style>